<%@ page import="main.java.com.entity.Category" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>分类页面</title>
</head>
<style>
    #dish,#pop,#update{
        z-index: 2;
        display: none;
        margin: -450px 600px;
        border: 1px solid black;
        background-color: white;
        position: absolute;
        width: 400px;
        height: 180px;
    }
    #dish,#pop,#update{
        background-color: gainsboro;
    }
    h1{
        margin-left: 700px;
    }
    div p{
        margin-left: 140px;
    }
    .text{
        margin-left: 50px;
    }
    .input{
        margin-left: 100px;
    }
    .add{
        height: 40px;
        background-color: orange;
    }
</style>
<body class="body">
    <div style="border: 1px solid black">
        <div>
        <h1>分类管理页面</h1>
        <button type="button" class="add" onclick="adddish()">+新增菜品分类</button>
        <button type="button" class="add" onclick="addpop()">+新增套餐分类</button>
        </div>
        <div>
            <table border="1" style="width: 100%;height:70%;text-align: center">
                <tr>
                    <th>分类名称</th>
                    <th>分类类型</th>
                    <th>操作时间</th>
                    <th>排序</th>
                    <th>操作</th>
                </tr>
                <c:forEach items="${list.list}" var="category">
                    <tr>
                        <td class="id" style="display: none">${category.id}</td>
                        <td>${category.name}</td>
                        <td>${category.type}</td>
                        <td>${category.create_time}</td>
                        <td>${category.sort}</td>
                        <td><a href="#" data-id="${category.id}" class="update" onclick="updatedish('${category.id}','${category.name}','${category.sort}')">修改</a><span>|
                        </span><a href="#" data-id="${category.id}" class="delet" onclick="deletedish('${category.id}')">删除</a> </td>
                    </tr>
                </c:forEach>
            <tfoot>
            <tr>
                <td colspan="5">
                    <input type="hidden" name="pageNo" value="${list.currPageNo}"/>
                    <input type="hidden" name="pages" value="${list.totalPages}"/>
                    <input type="text" name="jumppage">
                    <input type="button" value="跳转" onclick="jumppage()">
                    <a href="javascript:void(0)" class="first">首页</a>
                    <a href="javascript:void(0)" class="up">上一页</a>
                    <a href="javascript:void(0)" class="next">下一页</a>
                    <a href="javascript:void(0)" class="last">末页</a>
                    |共${list.totalPages}页|共${list.totals}条
                </td>
            </tr>
            </tfoot>
            </table>
        </div>
        <form action="/adddish" method="post">
        <div id="dish">
            <p id="dishname">新增菜品分类</p>
            <p class="text">分类名称:<input type="text" name="dishname"></p>
            <p class="text">排&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序:<input type="text" name="dishsort"></p>
            <input class="input" type="reset" value="取消" onclick="hide(1)">
            <input class="input" type="submit" value="保存">
        </div>
        </form>
        <form action="/addpop" method="post">
        <div id="pop">
            <p id="popname">新增套餐分类</p>
            <p class="text">分类名称:<input type="text" name="popname"></p>
            <p class="text">排&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序:<input type="text" name="popsort"></p>
            <input class="input" type="reset" value="取消" onclick="hide(2)">
            <input class="input" type="submit" value="保存">
        </div>
        </form>
        <form action="/update" method="post">
            <div id="update">
                <input type="hidden" name="updateid" value="-1">
                <p id="updatename">修改页面</p>
                <p class="text">分类名称:<input type="text" name="updatename"></p>
                <p class="text">排&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序:<input type="text" name="updatesort"></p>
                <input class="input" type="reset" value="取消" onclick="hide(3)">
                <input class="input" type="submit" value="确定">
            </div>
        </form>
    </div>
</body>
<script type="text/javascript" src="backend/js/jquery3.6.4.js"></script>
<script type="text/javascript">
    $(function(){
        $(".first").click(()=>{
            jump(1)
        });
        $(".up").click(()=>{
            let pageNo= $("input[name=pageNo]").val();
            pageNo = parseInt(pageNo) - 1;
            jump(pageNo)
        });
        $(".next").click(()=>{
            let pageNo= $("input[name=pageNo]").val();
            pageNo = parseInt(pageNo) + 1;
            jump(pageNo)
        });
        $(".last").click(()=>{
            let pageNo= $("input[name=pages]").val();
            jump(pageNo)
        });
    })
    function jump(pageNo){
        let pageSize = $("select[name=pageSize]").val();
        let url = '/selectcategory?pageNo='+pageNo+'&pageSize='+pageSize;
        console.log(url);
        location.href = url;
    }
    function jumppage(){
        let pageNo = $("input[name=jumppage]").val();
        let url = "/selectcategory?pageNo="+pageNo;
        location.href=url;
    }
    function hide(a){
        if(a==1){
            $("#dish").hide();
        }else if(a==2){
            $("#pop").hide();
        }else if(a==3){
            $("#update").hide();
        }
    }
    function adddish(){
        $("#dish").show();
        $("#pop").hide();
        $("#update").hide();
    }
    function addpop(){
        $("#pop").show();
        $("#dish").hide();
        $("#update").hide();
    }
    function deletedish(id){
        $.ajax({
            url:"/delet",
            type:"post",
            data:{
                "deleteid":id
            },
            success:function (count){
                var deletecount = parseInt(count);
                if(deletecount>0){
                    alert("删除成功");
                }else {
                    alert("删除失败");
                }
                location.href = "/selectcategory";
            }
        })
    }
    function updatedish(id,name,sortd){
        $("#update input[name='updateid']").val(id);
        $("#update input[name='updatename']").val(name);
        $("#update input[name='updatesort']").val(sort);
        $("#dish").hide();
        $("#pop").hide();
        $("#update").show();
        $.ajax({
            url: "/update",
            type: "post",
            data: {
                "updateid":id
            },
            success:function (count){
                var deletecount = parseInt(count);
                if(deletecount>0){
                    alert("修改成功");
                }else {
                    alert("修改失败");
                }
                location.href = "/selectcategory";
            }
        })
    }
</script>
</html>
